<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>EditInPlace B站用户体验打造</title>
</head>
<body>
    <div id="app">
        <div id="ep1">
            <span id="content">男德学院一等奖学金获得者</span>
            <input type="text" id="input" value = "男德学院一等奖学金获得者">
            <input type="button" id = "save" value = "Save">
            <input type="button" id = "cancel" value = "Cancel">
        </div>

    </div>
    <script>
       //  dom js html 动态操作 html5
       const content = document.getElementByid("context");
       const input = document.getElementByid("input");
       const save = document.getElementByid("save");
       const cancel = document.getElementByid("cancel");
       // 文本编辑状态
       function convertToEdit(){
            input.style.display = "inline";
            save.style.display = "inline";
            cancel.style.display = "inline";
            content.style.display = "none";
       }

      content.addEventListener("click",function(){
        convertToEdit();
        input.value = content.innerText;
      })

    </script>
</body>
</html>